

<template>
  <div>
    <basic-container>
      <avue-crud :option="tableOption" :data="tableData" :table-loading="tableLoading" :page="page" ref="crud" @size-change="sizeChange" @current-change="currentChange" @row-click="handleClick" @refresh-change="handleList">>
        <template slot="menuLeft">
          <div class="el-form el-form--inline">
            <div class="el-form-item">
              <el-select v-model="isAddflag" placeholder="请选择" @change="handleList(true)">
                <el-option v-for="item in selectOptions.flag" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="el-form-item">
              <div class="el-form-item">
                <el-input v-model="search" placeholder="请输入产品名称"></el-input>
              </div>
              <div class="el-form-item">
                <el-button type="primary" @click="page.currentPage = 1;handleList(true)" size="small">搜索</el-button>
              </div>
            </div>
          </div>
        </template>
        <template slot-scope="scope" slot="menu" style="width:100px">
          <el-button type="primary" @click="handleSkuList(scope.row)" size="small">查看</el-button>
        </template>

        <template slot-scope="scope" slot="skus" >
             <span v-for="(item,index) in scope.row.skus" :key="index">
                  {{item.sku_str}} &nbsp; &nbsp;
             </span>
        </template>
      </avue-crud>

      <!-- 已添加产品属性查看 -->
      <el-dialog title="产品属性" :visible.sync="skuFlag">
        <el-table v-if="isAddflag" border stripe :data="skusData" ref="multipleTable" style="width: 100%">
          <el-table-column prop="sku_str" label="属性" width="180">
          </el-table-column>
          <el-table-column prop="price" label="参考价格">
          </el-table-column>
        </el-table>

        <!-- 未添加产品属性查看 -->
        <el-table v-else border stripe :data="skusData" ref="multipleTable" style="width: 100%" @selection-change="handleSelectionChange">>
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="sku_str" label="属性" width="180">
          </el-table-column>
          <el-table-column prop="price" label="输入价格">
            <template slot-scope="scope">
              <el-input placeholder="请输入价格" type="number" min="0.00" step="0.01" v-model="scope.row.input_price" clearable>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="参考价格">
          </el-table-column>
        </el-table>

        <el-row v-if="isAddflag == 0" style="text-align:right; margin-top:10px"> 
          <el-col><el-button type="primary" @click="addProduct()">添加</el-button></el-col>
        </el-row>
      </el-dialog>

    </basic-container>
  </div>
</template>

<script>
/* eslint-disable */
import { mapGetters } from "vuex";
import crudMixin from '@/mixins/crud'
import options from "./options.js";
import { isNull, arr2pojo, obj2pojo, validateResponse } from "@/util/util";
import { successMsg, errorMsg } from "@/util/message"
import { field, reField } from "./field";

export default {
  name: "role",
  mixins: [crudMixin],
  components: {
  },
  data() {
    return Object.assign({}, options, {
      skuFlag: false,
      skusData: [],
      skusMy: [],
      isAddflag: 0,  // 是否添加到产品库中
      multipleSelection: [],
      search: '',
      selectRow:{},
      selectOptions: {
        flag: [
          {
            label: '未添加',
            value: 0,
          },
          {
            label: '已添加',
            value: 1,
          }
        ]
      },
      multipleSelection: []  //获取选择的sku数据
    })
  },
  created() {
    //初始化数据格式
    this.handleList();
  },
  watch: {},
  mounted() { },
  computed: {

  },
  props: [],
  methods: {
    handleList(init = false) {
       if (init)
      {
        this.page.currentPage = 1
      }
      this.tableLoading = true;
      let param = Object.assign({}, {
        perPage: this.page.pageSize,
        page: this.page.currentPage,
        search: this.search,
        flag: this.isAddflag
      });
      var vm = this

      this.$store
        .dispatch("GetLibrary", param)
        .then(
          res => {
            console.log(res)
            this.tableLoading = false;
            if (res.data.status == 1) {
              let _data = res.data.result.data || []
              let _meta = res.data.result.meta || []

              this.tableData = _data;
              this.page.total = _meta.total;
            }
          }, error => {
            this.tableLoading = false;
          })
    },
    toggleSelection(rows) {

      if (rows) {
        rows.forEach(row => {
          if (row.is_add) {
            this.$refs.multipleTable.toggleRowSelection(row);
          }
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSkuList(row) {
      var vm = this
      vm.selectRow = row
      console.log(vm.selectRow)
      vm.skuFlag = true
      vm.skusData = this.tableData[row.$index].skus
      vm.skusData.forEach(element => {
          element.input_price = element.price
      });
    },
    handleSelectionChange(val) {
        this.multipleSelection = val;
    },
    // 添加产品
    addProduct(){
      let vm = this
      // 获取选择的价格
      if (isNull(this.multipleSelection)) return errorMsg(this,'请至少选择一个')
      console.log(this.multipleSelection)
      // 获取产品数据
      let skusData = this.multipleSelection.map(element => {
            return {
              id: element.id,
              price: element.input_price
            }
      });

      var param = {
        id:vm.selectRow.id,
        skus:skusData
      }
     
      this.$store
        .dispatch("AddLibraryProduct", param)
        .then(
          res => {
            if (res.data.status == 1) {
                vm.skuFlag = false
                vm.tableData.splice(vm.selectRow.$index,1)
            }
            else{
               errorMsg(this,res.data.message)
            }
          }, error => {
            errorMsg(this,error)
          })
    }
  }
};
</script>

<style lang="scss" scoped>
.table-container {
  padding: 8px 10px;
}
</style>
